<template>
  <div>
    <pstep :stepData="stepData" :doneNum="doneNum"  style="margin-bottom: 20px;width: 90%;"></pstep>
    <!-- 第一步 -->
    <div v-show="doneNum===1">
      <pscFormOne></pscFormOne>
      <div class="step-btn-box">
        <el-button type="primary" @click="doneNum=2">下一步</el-button>
      </div>
    </div>
    <!-- 第二步 -->
    <div v-show="doneNum===2">
      <pscFormTwo></pscFormTwo>
      <div class="step-btn-box">
        <el-button class="mr10" @click="doneNum=1">上一步</el-button>
        <el-button type="primary" @click="doneNum=3">下一步</el-button>
      </div>
    </div>
    <!-- 第三步 -->
    <div v-show="doneNum===3">
      <pscFormThree ref="pscFormThreeRef"></pscFormThree>
      <div class="step-btn-box">
        <el-button class="mr10" @click="doneNum=2">上一步</el-button>
        <el-button type="primary" @click="doneNum=4">下一步</el-button>
      </div>
    </div>
    <!-- 第四步 -->
    <div v-show="doneNum===4">
      <viewS @edit="(val)=>{doneNum=val}"></viewS>
      <div class="step-btn-box">
        <el-button class="mr10" @click="doneNum=3">上一步</el-button>
        <el-button type="primary" @click="handleAdd">立即创建</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import pstep from '@/components/publicStep'
import pscFormOne from './formOne'
import pscFormTwo from './formTwo'
import pscFormThree from './formThree'
import viewS from './viewShow'
export default {
  components:{pstep,pscFormOne,pscFormTwo,pscFormThree,viewS},
  data() {
      return {
        stepData:[
          {num:1,nameIn:'1',nameOut:'基础配置'},
          {num:2,nameIn:'2',nameOut:'网络配置'},
          {num:3,nameIn:'3',nameOut:'高级配置'},
          {num:4,nameIn:'4',nameOut:'确认信息'}
        ],
        doneNum:1,
      }
    },
    mounted(){
      let num = this.$route.query.num
      if(num){
        this.doneNum = Number(num)
      }
    },
    methods: {
      handleAdd() {
        console.log('submit!');
        // 发送请求
        // 返回列表页
        // let params = {
        //   key:'count_vm',
        //   name:'123123',
        //   data:JSON.stringify({})
        // }
        // console.log('~~~~~~~~',this.$refs.pscFormThreeRef.getName())
        // this.$api.apiFormAdd(params).then(res=>{
        //     console.log('~~~~~~~~',res)
        //   })
        this.$router.push({path:'/computsuc/virtualMachine'})
      }
    }

}
</script>

<style scoped lang="less">

</style>
